<template>
    <div class="fullScreen bg-c-g tx-s-14 tx-c-222">
        <m-header :msg="$route.query.name" :close="'vip'"></m-header>
        <mescroll-vue ref="mescroll" :up="mescrollUp" @init="mescrollInit">
            <no-data v-if="status"></no-data>
            <div class="bg-c-wh padd-lr">
                <div v-for="(item, i) in data" :key="i"
                    class="flex-box flex-pj line-box bor-b-g"
                    @click="openNext(item.id, item.name)"> 
                    <div>{{item.name}}</div>
                    <div class="arrow_right mar-l"></div>
                </div>
            </div>
        </mescroll-vue>
    </div>
</template>
<script type="text/ecmascript-6">
import 'common/css/user.css'
import MHeader from '../../components/m-header'
import NoData from '../../components/noData'
import MescrollVue from 'mescroll.js/mescroll.vue'
import { isEmptyObject } from '../../common/js/common'
import { lowerList } from '../../common/js/axiosUtil' 
export default { 
    data() {
        return { 
            data : '',
            status : '',
            mescroll: null, // mescroll实例对象
            //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则mescrollDown可不用写了)
            mescrollUp: { // 上拉加载的配置.
                page: {
					num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
					size: 15 //每页数据条数,默认10
				},
                callback: this.upCallback, // 上拉回调,此处简写; 相当于 callback: function(page, mescroll) { }
                htmlNodata: '<p class="upwarp-nodata">没有更多数据了</p>',
                noMoreSize: 5 //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;
            }
        }
    },
    methods: {
        // 打开会员详情页
        openNext (id, name) {
            this.$router.push({
                path: "/vipMemInfo",
                query: {
                    id : id,
                    name : name
                }
            }) 
        },
        // 获取会员数据
        getData (page, count) {
            let params = this.$params(1)
            params.append('type', this.$route.query.id)
            params.append('count', count)
            params.append('page', page)
            lowerList(params)
            .then((response)=> {
                if(response.data.code == "200"){
                    const {data} = response.data
                    if(isEmptyObject(data)){
                        if(page === 1){
                            // 没有数据时显示提示界面,隐藏下拉刷新和上拉加载的状态;
                            this.mescroll.endErr()
                            this.status = true 
                        }else{
                            // 上一页数据为10条本页数据为0时,显示提示信息并禁止上拉事件
                            this.$nextTick(() => {
                                this.mescroll.endSuccess(data.length)
                            })
                        }
                    }else{
                        // 如果是第一页需手动制空列表
                        if (page === 1) {
                            this.data = []
                        }
                        // 把请求到的数据添加到列表
                        this.data = this.data.concat(data) 
                        // 数据渲染成功后,隐藏下拉刷新的状态
                        this.$nextTick(() => {
                            this.mescroll.endSuccess(data.length)
                        })
                    }
                } else {
                    this.mescroll.endErr()
                    this.$logAgain(response.data.msg)
                }
            })
            .catch((error)=> {
                // 联网失败的回调,隐藏下拉刷新和上拉加载的状态;
                this.mescroll.endErr()
                this.$toast('请求服务失败', 2000)
            })
        },
        // mescroll组件初始化的回调,可获取到mescroll对象
        mescrollInit (mescroll) {
            this.mescroll = mescroll 
        },
        // 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
        upCallback (page) {
            this.getData(page.num, page.size)
        }
    },
    components: {
        MHeader,
        MescrollVue,
        NoData
    }
}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
    /*通过fixed固定mescroll的高度*/
    .mescroll
        position: fixed
        top: 2.75rem
        bottom: 0
        height: auto
    .padd-lr
        padding: 0 .75rem
    .line-box
        padding: 1rem 0
        background: white
    .mar-l
        margin-left: .75rem
</style>

